<template>
  <div class="dashboard-content" style="position:absolute;width:100%;">
    <el-card shadow="none" :body-style="{padding: '0px', position:'absolute', height:'100%', width: '100%'}">
      <div class="card-box clearfix" style="height:100%;">
        <div slot="header" class="clearfix card-title">
          <span>{{content.name}}</span>
          <el-button class="btn-more" type="text">更多 <i class="el-icon-d-arrow-right"></i></el-button>
        </div>
        <template>
          <div class="tabs-content-box" style="width: 55%; height: 100%;float:left;">
            <template>
              <div class="tableTitle">{{tableTitle}}</div>
              <el-table
                :data="expenditureList"
                :header-cell-style="headStyle"
                :cell-style="tableStyle"
                border
                stripe
                size ="small"
                style="width: 100%">
                <el-table-column
                  prop="name"
                  label="">
                </el-table-column>
                <el-table-column
                  prop="money"
                  label="金额"
                  width="90">
                </el-table-column>
                <el-table-column
                  prop="moneyGw"
                  label="公务卡金额"
                  width="80">
                </el-table-column>
                <el-table-column
                  prop="number"
                  label="笔数"
                  width="45">
                </el-table-column>
                <el-table-column
                  prop="numberGw"
                  label="公务卡笔数"
                  width="70">
                </el-table-column>
              </el-table>
              <div class="info"><i class="el-icon-warning"></i>公务卡还款预警:您的公务卡还款日为:<span>{{dataHk}}日,请及时还款.</span></div>
            </template>
          </div>
          <div class="tabs-content-box" style="width: 43%; height: 100%;float:right;">
            <!--<div id="chart" :style="{width: '100%', height: '100%'}" auto-resize></div>-->
            <v-chart :options="barOption" :style="{width: '100%', height: '100%'}" :autoresize="true"> </v-chart>
          </div>
        </template>
      </div>
    </el-card>
  </div>
</template>

<script>
//let echarts = require('echarts/lib/echarts');
import ECharts from '~/static/js/vue-echarts';
import { expenditureGr } from './data/Content.js';
//import option from '/portal/data/ChartsData.json';
require('echarts/lib/chart/bar');
require('echarts/lib/chart/line');
require('echarts/lib/chart/pie');
require('echarts/lib/component/tooltip');
require('echarts/lib/component/title');
require('echarts/lib/component/legend');
export default {
    name: 'ExpenditureGr',
    props: ['content'],
    data(){
        return {
            expenditureList: [],
            barOption: {},
            tableTitle:'',
            dataHk:'',
            headStyle: {'background':'#eee','color':'#333','borderColor':'#ddd','fontWeight': '500'},
            tableStyle: {
                'color':'#333','fontWeight': '400'
            }
        };
    },
    components: {
        'v-chart': ECharts
    },
    created:function (){
        this.getExpenditureList();
    },
    methods: {
        getExpenditureList(){
            this.$axios.get(expenditureGr.url1)
                .then(res => {
                    // console.log(res);
                    this.expenditureList = res.data[0].tableData;
                    this.tableTitle=res.data[0].title;
                    this.dataHk=res.data[0].dataHk;
                    // console.log(res.data[0].tableData);
                });
        }
    },
    mounted() {
        this.$axios.get(expenditureGr.url2)
            .then(res => {
                this.barOption = res.data;
            });
    }
};
</script>
<style scoped lang="scss">
  .card-box {

    .tableTitle{
      font-size:14px;
      font-weight:bold;
      color:#333;
      margin-bottom:6px;
    }
    .info{
      font-size:12px;
      padding:6px 0;
    }
    .info span{
      color:#E02020;
    }
    .info i{
      color:#0066FF;
      margin-right:6px;
    }
     .el-table th>.cell {
        padding-left: 4px;
        padding-right:4px;
    }
     .el-table .cell {
        padding-left: 4px;
        padding-right:4px;
    }
     .el-table .cell, .el-table--border td:first-child .cell, .el-table--border th:first-child .cell{
        padding-left: 4px;
        padding-right:4px;
    }
  }
  
</style>
